<template>
    <view class="content">
        <view class="index-content" >
            <image class="main-bg" :src="friendBackImage"  mode="aspectFill"></image>
			<view class="rule f-r-c" @click="showDialog2=true" >
				<uni-icons type="help" size="16" color="#fff"></uni-icons>
				<text>规则说明</text>
			</view>
			
            <view class="box-s" >
				<view class="top">
					<view class="top-left f-r-s">
						<image class="touxiang" :src="userinfo.avatar&&userinfo.avatar!=''?userinfo.avatar:defHead" ></image>
						<view class="name">
							<view class="nickname ellipsis" >{{userinfo.nickName}}</view>
							<view class="icon f-r-c">{{userinfo.userDesc}}</view>
						</view>
					</view>
					<view class="top-right ">
						<view class="f-r-c bggradient" @click="toWithDrawal">提现</view>
					</view>
				</view>
                <view class="money-ul f-r-b">
					<view class="money-li">
						<view class="money-li-title">
							累积奖励天数
						</view>
						<view class="money-li-num" :style="{'color':themeColor,}">
							{{dateDetail.totalRewardDays||0}}
						</view>
						
					</view>
					<view class="line"></view>
					<view class="money-li">
						<view class="money-li-title">
							本月奖励天数
						</view>
						<view class="money-li-num" :style="{'color':themeColor,}">
							{{dateDetail.monthRewardDays||0}}
						</view>
						
					</view>
				</view>
            </view>
			<view class="box-ul f-r-b">
				<view class="box-li bggradient" @click="toNumberDetail(1,dateDetail.memberUserNum)">
					<text class="box-li-title">会员用户</text>
					<text class="nox-li-num">{{dateDetail.memberUserNum}}</text>
				</view>
				
				<view class="box-li bggradient" @click="toNumberDetail(2,dateDetail.totalUserNum)">
					<text class="box-li-title">累计客户</text>
					<text class="nox-li-num">{{dateDetail.totalUserNum}}</text>
				</view>
				<view class="box-li bggradient" @click="toNumberDetail(3,dateDetail.markOrderNum)">
					<text class="box-li-title">成交订单</text>
					<text class="nox-li-num">{{dateDetail.markOrderNum}}</text>
				</view>
			</view>
			<view class="foot">
				<view class="foot-tip">你可以试试通过以下方式获取收益</view>
				<view class="type-ul ">
					<view class="type-li" @click="privewHb">
						<view class="type-li-img bggradient">
							<uni-icons type="personadd" size="30" color="#fff"></uni-icons>
						</view>
						<text class="type-li-text">推广海报</text>
					</view>
					<view class="type-li" @click="showDialog=true">
						<view class="type-li-img bggradient">
							<uni-icons type="link" size="30" color="#fff"></uni-icons>
						</view>
						<text class="type-li-text">单品广告</text>
					</view>
				</view>
			</view>
			
        </view>
		
		
	   <!--单品广告  -->
		<view class="dislog-black" v-if="showDialog">
			<view class="dialog-white">
				<view class="close f-r-e">
					<image class="img4" src="../../static/image/close@2x.png" @click="showDialog=false"></image>
				</view>
				<view class="t1">赚取收益</view>
				<view class="t2">怎样赚取个人收益？</view>
				<view class="t3">在首页点击行情进入→选择品牌进入详情页→点击右．上角"生成海报"→选择您要出货或接货的类型→填写价格→点击生成分享至微信好友或朋友圈，好友通过您分享的海报扫码绑定关系，直至购买会员后，即可立即获取收益。</view>
				<view class="btn f-r-c bggradient"  @click="showDialog=false">确定</view>
			</view>
		</view>
			<!-- 规则说明 -->
		<view class="dislog-black" v-if="showDialog2">
			<view class="dialog-white">
				<view class="close f-r-e">
					<image class="img4" src="../../static/image/close@2x.png" @click="showDialog2=false"></image>
				</view>
				<view class="t5">`` 邀请新用户福利来了 ``
</view>
				<view class="t6">老用户邀请新用户开通会员可得VIP会员奖励，邀请越多，奖励越多，用户续费更有VIP奖励!</view>
				<view class="btn2 f-r-c bggradient"  @click="showDialog2=false">我知道了</view>
			</view>
		</view>
    </view>
</template>

<script>
export default {
    data() {
        return {
			friendBackImage:'',
			showDialog:false,
			showDialog2:false,
			defHead: require('@/static/image/def_avatar.png'),
			userinfo:{
				avatar:'',
				nickName:'',
				userId:null,
				userName:'',
				userDesc:'',
				phoneNumber:'',
				memberId:null,//会员id
				memberExpireDate:'',//会员到期时间
				referralCode:'',//会员推广码
				disable:0,//会员状态（0普通, 1会员, 2过期）
				isVip:false,//是否VIP 
			},
			dateDetail:{
				// 团队销售额
				// 个人收益  待结算
				memberUserNum:'',//会员用户
				totalUserNum:'',// 累计客户
				markOrderNum:'',// 成交订单
				marketingPoster:'',// 推广海报
				
				monthRewardDays:'',//本月奖励天数
				totalRewardDays:'',//累积奖励天数

				
				
			},
           
            
        }
    },
	computed: {
	  themeColor() {
	    return this.$themeColor;
	  }
	},
    onLoad() {
       this.getUserInfo();
	   this.getExtendData();
	   this.friendBackImage=this.$prefix(uni.getStorageSync('configData').friendBackImage);
    },
    onShow() {
    },
    
    methods:{
		getUserInfo(){
		    let opts = {
		    	url: '/wx/getUserInfo',
		    	method: 'get'
		    };
		    let _self=this;
		    _self.$http(opts,{}).then(res => {
		    	if(res.code==200){
		            _self.userinfo=res.data;
		    	}
		    }) 
		},
		getExtendData(){
			let opts = {
				url: '/authMarket/getExtendData',
				method: 'get'
			};
			let _self=this;
			_self.$http(opts,{}).then(res => {
				if(res.code==200){
			        _self.dateDetail=res.data;
				}
			}) 
		},
		//提现
		toWithDrawal(){
			uni.navigateTo({
				url:'/pages/main/withdrawal',
			})
		},
		toNumberDetail(type,num){
		   if(!num||num==undefined||num==''){
			   num=0;
		   }
			uni.navigateTo({
				url:'/pages/invite/peopleNum?peopleType='+type+'&peopleNum='+num,
			})
		},
		privewHb(){
			let filePath=this.dateDetail.marketingPoster;
			if(!filePath||filePath==undefined||filePath==''){
				uni.showToast({
					title:'未生成海报',
					icon:'none',
				})
			    return false;
			}
			let url=this.$prefix(filePath);
			let list=[];
			list.push(url);
			uni.previewImage({
			     urls: list, //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了     		
			     success: function(res) { 
			     },
			     complete: function(res) {
			        
			     },
			 })
		},
		

       
    }
    
}


</script>
<style>
	page{
		background: #f8f8f8;
	}
</style>
<style scoped lang="less">
.content{
    .index-content{
		position: relative;
		top: 0rpx;
		box-sizing: border-box;
		z-index: 100;
        .main-bg{
            width: 100vw;
            height:400rpx;
            background-size: cover;
            position: fixed;
            top:0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: -1;
			// border-radius: 0 0 30% 40%;
            
        
        }
		.rule{
			width: 160rpx;
			height: 50rpx;
			margin-bottom: 20rpx;
			// border: 1rpx #fff solid;
			float: right;
			background: rgba(255,0,0,0.5);
			border-radius: 30rpx 0 0 30rpx;
			text{
				margin-left: 5rpx;
				color: #fff;
				font-size: 25rpx;
			}	
		}
		.box-s{
			width: 100%;
			// height: 400rpx;
			padding: 20rpx;
			box-sizing: border-box;
			background: #fff;
			overflow: hidden;
			border-radius: 20rpx;
			.top{
				height: 120rpx;
				margin-bottom: 20rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;
				.top-right{
					width: 240rpx;
					height: 100%;
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: center;
					view{
						width: 180rpx;
						height: 54rpx;
						border-radius: 30rpx;
						color: #fff;
						font-size: 28rpx;
						font-weight: 500;
						text-align: center;
					}
				}
				
				.top-left{
					height: 100%;
					.touxiang{
						width: 100rpx;
						height: 100rpx;
						border-radius: 50%;
						background-size: 100% 100%;
						margin:  0 10rpx;
					}
					.name{
						display: flex;
						flex-direction: column;
						align-items: flex-start;
						justify-content: space-around;
						height: 100%;
						.nickname{
							width: 310rpx;
							font-size: 38rpx;
							color: #000;
							height: 60rpx;
							line-height: 60rpx;
							text-align: left;
							font-weight: 500;
							
						}
						.icon{
							min-width: 200rpx;
							max-width: 310rpx;
							padding: 0 10rpx;
							height: 42rpx;
							line-height: 42rpx;
							display: block;
							border-radius: 26rpx;
							background:#ff000090;
							color: #fff;
							font-size: 26rpx;
						}
					}
				}
			}
			.money-ul{
				
				.money-li{
					height: 180rpx;
					flex: 1;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					.money-li-title{
						color: #666;
						font-size: 26rpx;
					}
					.money-li-num{
						font-size: 32rpx;
						font-weight: 500;
						margin: 16rpx 0;
					}
					.money-li-foot{
						color: #999;
						font-size: 24rpx;
						.img4{
							width: 32rpx;
							height: 32rpx;
							
						}
					}
				}
				.line{
					width: 1rpx;
					height: 120rpx;
					background: rgba(0,0,0,0.1);
					display: block;
				}
			}
			
		}
		.box-ul{
			margin: 50rpx auto 140rpx;
			.box-li{
				width: calc((100% - 20rpx)/3);
				height: 100rpx;
				border-radius: 20rpx;
				padding: 16rpx 0 ;
			
				color: #fff;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: space-around;
				.box-li-title{
					font-size: 26rpx;
					margin-bottom: 10rpx;
				}
				.nox-li-num{
					width: 100%;
					text-align: center;
					font-size: 30rpx;
					font-weight: 500;
				}
			}
			
			
		}
		
        .foot{
			
			.foot-tip{
				margin: 30rpx auto;
				text-align: center;
				font-size: 24rpx;
				color: #666;
				
			}
			.type-ul{
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-around;
				padding: 30rpx;
				border-radius: 20rpx;
				background: #fff;
				.type-li{
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					.type-li-img{
						width: 100rpx;
						height: 100rpx;
						border-radius: 50%;
						margin-bottom: 20rpx;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
					}
					.type-li-text{
						font-size: 26rpx;
						color: #222;
					}
					
				}
			}
		}
		
        
        
        
        
       
    }
	.dislog-black{
		width: 100vw;
		height: 100vh;
		background: rgba(0,9,9,0.2);
		position: fixed;
		z-index: 100;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		
		.dialog-white{
			width: 530rpx;
			background: #fff;
			border-radius: 20rpx;
			padding: 30rpx;
			.t1{
				color: #000;
				font-weight: 700;
				font-size: 34rpx;
				margin-bottom: 20rpx;
				text-align: center;
			}
			.t2{
				
				color: #333;
				font-weight: 400;
				font-size: 34rpx;
				margin-bottom: 20rpx;
				margin-left: 40rpx;
				margin-right: 40rpx;
				text-align: left;
			}
			.t3{
				color: #333;
				text-align: left;
				font-weight: 400;
				font-size: 26rpx;
				margin-bottom: 20rpx;
				margin-left: 40rpx;
				margin-right: 40rpx;
				line-height: 40rpx;
				
			}
			.btn{
				width: 260rpx;
				height: 60rpx;
				color: #fff;
				border-radius: 30rpx;
				margin:  30rpx auto 0;
				font-size: 28rpx;
				
			}
			.t5{
				color: #f00;
				font-weight: 700;
				font-size: 34rpx;
				margin-bottom: 50rpx;
				text-align: center;
			}
			.t6{
				color: #666;
				text-align: left;
				font-weight: 400;
				font-size: 26rpx;
				line-height: 40rpx;
			} 
			.btn2{
				width: 400rpx;
				height: 60rpx;
				color: #fff;
				border-radius: 30rpx;
				margin:  30rpx auto;
				font-size: 28rpx;
			}
		}
	}
    
}
</style>